<template>
  <div id="app" style="">
    <router-view />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  created() {
    document.documentElement.style.setProperty('--main-bgccolor', '#191919');
    document.documentElement.style.setProperty('--main-color', '#cad1d9');




  },


}

document.addEventListener("dblclick", function (event) {
  if (event.target.tagName.toLowerCase() === "img") {
    showImagePreview(event.target.src);
  }
});

function showImagePreview(imageUrl) {
  const image = new Image();
  image.src = imageUrl;
  image.onload = () => {
    // 创建弹出层
    const previewContainer = document.createElement("div");
    previewContainer.style.position = "fixed";
    previewContainer.style.top = 0;
    previewContainer.style.bottom = 0;
    previewContainer.style.left = 0;
    previewContainer.style.right = 0;
    previewContainer.style.backgroundColor = "rgba(0,0,0,0.8)";
    previewContainer.style.display = "flex";

    previewContainer.style.zIndex = 999999999999999;
    previewContainer.style.justifyContent = "center";
    previewContainer.style.alignItems = "center";
    document.body.appendChild(previewContainer);
    // 在弹出层中添加图片
    const previewImage = document.createElement("img");
    previewImage.src = imageUrl;
    previewImage.style.maxWidth = "80%";
    previewImage.style.maxHeight = "80%";
    previewImage.style.borderRadius = "5px";
    previewContainer.appendChild(previewImage);
    // 点击弹出层，关闭预览
    previewContainer.addEventListener("click", () => {
      previewContainer.style.display = "none";
      document.body.removeChild(previewContainer);
    });
  };
}


function Live2d(l_json) {
  try {
    L2Dwidget.init({
      "model": {
        "jsonPath": l_json,
        "scale": 1,
        "hHeadPos": 0.5,
        "vHeadPos": 0.618,
      },
      "display": {
        "position": "left",
        "width": 100,
        "height": 100,
        "hOffset": 0,
        "vOffset": 0
      },
      "mobile": {
        "show": true,
        "scale": 0.5
      },
      "react": {
        "opacityDefault": 0.7,
        "opacityOnHover": 0.2
      }
    });

  } catch (e) {
    //TODO handle the exception
  }
}



var now = new Date();
var hour = now.getHours();

var screenWidth = window.innerWidth;

if (localStorage.getItem('cacheIsShowCat') == null) {

  if (screenWidth > 800) {
    if (hour <= 12) {
      Live2d('https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json')
    } else {
      Live2d('https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json')
    }
  }
}

 


</script>

<style>
/* *{
  background-color: var(--main-bgccolor) !important;
  color: var(--main-color) !important;
} */


* {
  font-family: var(--global-fontfamily) !important;
}
</style>
